<template>
    <el-form :model="tableData" label-width="auto" style="max-width: 720px" ref="tableFormRef">
    <el-form-item label="案由" prop="cause"><el-input v-model="tableData.cause"/></el-form-item>  

    <el-form-item label="提取固定开始时间" prop="beginTime">
        <el-date-picker v-model="tableData.beginTime" type="datetime" placeholder="选择开始时间" :editable=false style="width: 100%" value-format="YYYY-MM-DD HH:mm" format="YYYY-MM-DD HH:mm" date-format="YYYY-MM-DD" time-format="HH:mm"/>
    </el-form-item>

    <el-form-item label="提取固定结束时间" prop="endTime">
        <el-date-picker v-model="tableData.endTime" type="datetime" placeholder="选择结束时间" :editable=false style="width: 100%" value-format="YYYY-MM-DD HH:mm"  format="YYYY-MM-DD HH:mm" date-format="YYYY-MM-DD" time-format="HH:mm"/>
    </el-form-item>  

    <div v-for="(elecData) in tableData.elecDataList" :key="elecData.id">
        <el-form-item label="电子数据" prop="elecDesc"><el-input v-model="elecData.elecDesc"/></el-form-item>
        <el-form-item label="类别" prop="type"><el-input v-model="elecData.type"/></el-form-item>
        <el-form-item label="来源" prop="source"><el-input v-model="elecData.source"/></el-form-item>
        <el-form-item label="文件格式" prop="fileFormat"><el-input v-model="elecData.fileFormat"/></el-form-item>
        <el-form-item label="完整性校验值" prop="md5"><el-input v-model="elecData.md5"/></el-form-item>
        <el-form-item label="备注" prop="remark"><el-input v-model="elecData.remark"/></el-form-item>
    </div>
    <el-form-item label="增加电子数据" prop="elecDataCount">
        <el-input-number v-model="elecDataCount" :min="1" :max="20" @change="elecDataListChange" />
    </el-form-item>  

    <el-form-item label="电子数据持有人" prop="provider">
        <el-input v-model="tableData.provider" placeholder="请输入电子数据持有人"/>
    </el-form-item>
    <el-form-item label="数据持有人日期" prop="providerDate">
        <el-date-picker v-model="tableData.providerDate" type="date" placeholder="数据持有人日期" :editable=false format="YYYY-MM-DD" value-format="YYYY-MM-DD"/>
    </el-form-item>


    <el-form-item label="侦察人员" prop="scouter">
        <el-input v-model="tableData.scouter" placeholder="请输入侦察人员"/>
    </el-form-item>
    <el-form-item label="侦察人员日期" prop="scouterDate">
        <el-date-picker v-model="tableData.scouterDate" type="date" placeholder="侦察人员日期" :editable=false format="YYYY-MM-DD" value-format="YYYY-MM-DD"/>
    </el-form-item>

    <el-form-item label="见证人" prop="witness">
        <el-input v-model="tableData.witness" placeholder="请输入见证人员"/>
    </el-form-item>
        <el-form-item label="见证人日期" prop="witnessDate">
        <el-date-picker v-model="tableData.witnessDate" type="date" placeholder="见证人日期" :editable=false format="YYYY-MM-DD" value-format="YYYY-MM-DD"/>
    </el-form-item>

    <el-form-item>
        <el-button type="primary" @click="submitTableForm()">提交下载文档</el-button>
        <el-button @click="resetForm(tableFormRef)">重置表单</el-button>
    </el-form-item>
    </el-form>
</template>

<script setup>
  import { reactive, ref} from 'vue';
  import showTips from "../api/Toast.js";
  import download from "../api/Download.js";
  import service from "../api/Service.js";

  const tableFormRef = ref();
  const elecDataCount = ref(1);
  const elecDataCountCache = ref(1);

  const tableData = reactive({
    templateId:"table",
    cause:"",
    beginTime:"",
    endTime:"",
    elecDataList:[{"id":1,"elecDesc":"","type":"","source":"","fileFormat":"","md5":"","remark":""}],
    provider:"",
    providerDate:"",
    scouter:"",
    scouterDate:"",
    witness:"",
    witnessDate:""
  });

  const elecDataListChange = () => {
    if(elecDataCountCache.value < elecDataCount.value){
      tableData.elecDataList.push({
        "id": elecDataCount.value,
        "elecDesc":"",
        "type":"",
        "source":"",
        "fileFormat":"",
        "md5":"",
        "remark":""
      });
    }else{
      tableData.elecDataList.splice(elecDataCount.value, 1);
    }
    elecDataCountCache.value = elecDataCount.value;
  };

  const submitTableForm = () => {
    if(checkFields() == false){
        return;
    }
    var baseUrl = "/bilu/service.do";
    service.post(baseUrl,tableData, {responseType:"blob"})
    .then(response => {        
      const blobData = response.data;                  
      if(blobData.type==="application/octet-stream"){
        download(blobData, "table.docx");
      }else{          
        const responseText = blobData.text();
        responseText.then((res) => {
            var error = JSON.parse(res);  
            showTips(error.message); 
        });
      }
    }).catch(error => {
      showTips(error.message);
    });
  };

  const checkFields = () => {
    if(tableData.cause == ""){
        showTips("请填写案由");
        return false;
    }
    if(tableData.beginTime == ""){
        showTips("请选择提取固定开始时间");
        return false;
    }
    if(tableData.endTime == ""){
        showTips("请选择提取固定结束时间");
        return false;
    }
    if(tableData.beginTime > tableData.endTime){
        showTips("开始时间不能晚于结束时间");
        return false;
    }
    return true;
  };

  const resetForm = (form) => {
    form.resetFields();
    elecDataCount.value = 1;
    elecDataCountCache.value = 1;
    tableData.elecDataList = [{"id":1,"elecDesc":"","type":"","source":"","fileFormat":"","md5":"","remark":""}];
  };
</script>
